<template>
  <el-container style="margin-top: 10px">
    <el-header>
      <el-card style="height: 75px">
        <div style="float: right;line-height: 36px;" />
        <el-form :inline="true">
          <el-button v-loading.fullscreen.lock="fullscreenLoading"
                     icon="el-icon-plus"
                     size="mini"
                     type="primary"
                     @click="exportSignListTo()">
            导出报名列表</el-button>

          <el-select v-model="status"
                     size="mini"
                     placeholder="请选择"
                     @change="statusChange">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value" />
          </el-select>

          <el-form-item label=""
                        style="margin-left: 20px">
            <el-input v-model="query_field"
                      placeholder="姓名/手机号 搜索"
                      size="mini" />
          </el-form-item>

          <el-button circle
                     type="primary"
                     icon="el-icon-search"
                     @click="searchStudents">
          </el-button>

          <el-button type="primary" size="mini" icon="el-icon-plus" @click="addVisible = true">添加报名信息</el-button>
                    
        </el-form>
      </el-card>
    </el-header>

    <el-main>
      <el-card>
        <el-table v-loading="loading"
                  :data="baomingList">
          <el-table-column prop="name"
                           label="姓名"
                           align="center" />
          <el-table-column prop="company"
                           label="公司"
                           align="center" />
          <el-table-column align="center"
                           prop="job"
                           label="职务" />
          <el-table-column align="center"
                           prop="phone"
                           label="手机号" />
          <el-table-column align="center"
                           prop="chapter"
                           label="报名课题" />
          <el-table-column align="center"
                           prop="date"
                           label="上课日期" />
          <el-table-column align="center"
                           prop="code"
                           label="唯一识别码" />
          <el-table-column align="center"
                           prop="show_message"
                           label="状态" />
          <el-table-column width="200px"
                           label="操作"
                           align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.show_message=='已取消'||scope.row.show_message=='待上课'"
                         :disabled="scope.row.show_message=='已取消'"
                         size="mini"
                         type="primary"
                         icon="el-icon-edit"
                         @click="cancelBaoming(scope.row)">取消报名</el-button>
              <el-button v-if="scope.row.show_message=='已评价'"
                         size="mini"
                         type="primary"
                         icon="el-icon-edit"
                         @click="handlelook(scope.row)">查看评价</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>

    <el-footer style="height: 85px">
      <el-card>
        <el-pagination
          style="text-align: center;"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </el-footer>
    <el-dialog title="评价详情"
               :visible.sync="dialogVisible"
               width="700px">
      <div class="title">
        <div class="left">
          问题
        </div>
        <div class="right">
          答案
        </div>
      </div>
      <div style="overflow: auto;height:500px">
        <div v-for="(item,index) in commentInfo"
             :key="index"
             class="ans">
          <div v-if="item.answer_type ==1"
               class="item">
            <div class="item_title">{{ item.question_name }}{{ item.pick_type==1?'（单选）':'（多选）' }}</div>
            <div class="item_right">
              <div v-for="(item2,index2) in item.answer_list"
                   :key="index2"
                   class="item_right_item">
                <div class="item_text">
                  {{ item2.content }}
                </div>
                <div class="item_select">
                  {{ item2.pick?'√':'' }}
                </div>

              </div>
            </div>

          </div>
          <div v-if="item.answer_type ==2"
               class="item">
            <div class="item_title">{{ item.question_name }}</div>
            <div class="item_right"
                 style="border-bottom:1px solid #ddd">{{ item.answer_text }}</div>
          </div>

        </div>

      </div>

    </el-dialog>

    <el-dialog title="添加报名信息" :visible.sync="addVisible" width="800px">
      <el-form :model="addData">
        <el-form-item label="学员" label-width="200px">
          <el-select
            @change="handleSelectUser"
            style="width: 400px"
            v-model="addData.user_id"
            filterable
            remote
            placeholder="请输入学员姓名搜索"
            :remote-method="getUsetList"
            :loading="loading">
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">手机号码：{{ item.phone }}&nbsp;&nbsp;&nbsp;&nbsp; 剩余学习次数：{{item.remain_num}}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item  label="上课学员" label-width="200px">
          <el-select v-model="addData.enroll_user" multiple placeholder="请选择上课学员" style="width:400px">
            <el-option
              v-for="item in enrollUserList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上课日期" label-width="200px">
          <el-select v-model="addData.date" multiple placeholder="请选择上课日期" style="width: 400px" >
            <el-option
              v-for="item in chapterInfo.date_range"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="signUp">确 定</el-button>
      </div>
    </el-dialog>


  </el-container>
</template>

<script>
import { getbaomingList, cancelBaoming, getChapterInfo } from '@/api/class.js'
import { commentInfo, exportSignList, learningCardUserList, getEnrollUserList, signUp } from '@/api/otherAPI.js'
// import { getToken } from '@/utils/auth'
// const baseUrl = process.env.VUE_APP_BASE_API
export default {
  data () {
    return {
      loading: false,
      baomingList: [],
      total: 0,
      page: 1,
      pageSize: 10,
      chapter_id: '',
      query_field: '',
      status: '0',
      commentInfo: [],
      dialogVisible: false,
      options: [
        { value: '0', label: '全部' },
        { value: '1', label: '已报名' },
        { value: '2', label: '已取消' },
        { value: '3', label: '已上课' },
        { value: '4', label: '已评价' }
      ],
      fullscreenLoading: false,
      addVisible: false,
      addData: {},
      chapterInfo: {},
      userList: [],
      enrollUserList: []
    }
  },
  mounted () {
    this.chapter_id = this.$route.query.id
    this.getbaomingList()
    this.getChapterInfo()
  },
  methods: {
    statusChange (e) {
      this.status = e
      this.getbaomingList()
    },
    handleSizeChange(e){
      this.pageSize = e
      this.getbaomingList()
    },
    handleCurrentChange(e) {
      this.page = e
      this.getbaomingList()
    },
    getbaomingList () {
      this.loading = true
      const params = {
        chapter_id: this.chapter_id,
        query_field: this.query_field,
        status: this.status,
        page: this.page,
        page_size: this.pageSize
      }
      getbaomingList(params).then(res => {
        this.baomingList = res.data.list
        this.total = res.data.paginate.total
        this.loading = false
      }).catch(res => {
        this.loading = false
      })
    },
    searchStudents () {
      this.getbaomingList()
    },
    // 导出报名列表
    exportSignListTo () {
      var obj = {
        chapter_id: this.chapter_id
      }

      const baseUrl = process.env.VUE_APP_BASE_API
      var upload_url = baseUrl + '/admin/user/chapter/exportSignList?chapter_id=' + this.chapter_id

      var routeUrl = this.$router.resolve({
        path: upload_url, // 新页面地址
        query: obj// 携带的参数
      })
      window.open(upload_url)
    },
    // 查看评价
    handlelook (row) {
      var obj = {
        user_id: row.user_id,
        chapter_id: row.chapter_id
      }
      console.log(obj, 'obj')
      commentInfo(obj).then(res => {
        this.commentInfo = res.data.question_info
        console.log(this.commentInfo)
        this.dialogVisible = true
      })
      //
    },
    /**
     * 取消报名
     */
    cancelBaoming (row) {
      this.$confirm('确认取消,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 如果点击了确定 则执行的逻辑
        cancelBaoming({ record_id: row.id, user_id: row.user_id }).then(res => {
          this.$message.success(res.msg)
          this.getbaomingList()
        })
      })
    },

    getChapterInfo(){
      getChapterInfo({
        chapter_id: this.$route.query.id
      }).then(res => {
        if (res.code == 200){
          this.chapterInfo = res.data
        }
      })
    },

    getUsetList(value){
      learningCardUserList({
        query_field: value,
        page: 1,
        page_size: 9999999
      }).then(res => {
        if (res.code == 200){
          this.userList = res.data.list
        }
      })
    },

    handleSelectUser(value){
      getEnrollUserList({
        user_id: value
      }).then(res => {
        if (res.code == 200){
          this.enrollUserList = res.data
        }
      })
    },
    signUp(){
      
      this.addData.chapter_id = this.$route.query.id
      signUp(this.addData).then(res => {
        if (res.code == 200){
          this.getbaomingList()
          this.$message.success('报名成功')
          this.addVisible = false
          this.addData = {}
          this.userList = {}
          this.enrollUserList = {}
        }
      })
    }
  }
}
</script>

<style scoped="scoped">
img {
  width: 100px;
  height: 100px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  object-fit: contain;
  width: 178px;
  height: 178px;
  display: block;
}
.title {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #dddddd;
}
.title .left {
  width: 30%;
}
.title .right {
  width: 70%;
}
.ans {
  width: 100%;
  text-align: center;
  font-size: 16px;
  line-height: 30px;
}
.ans .item {
  display: flex;
  align-items: stretch;
}
.ans .item .item_title {
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #dddddd;
  padding: 5px;
}
.ans .item .item_right {
  width: 70%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #dddddd;
}
.ans .item .item_right .item_right_item {
  display: flex;
}
.ans .item .item_right .item_right_item .item_text {
  width: 80%;
  border-bottom: 1px solid #dddddd;
  padding: 5px;
  text-align: left;
}
.ans .item .item_right .item_right_item .item_select {
  width: 20%;
  border-left: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
</style>
